<template>
  <div class="about">
    <h1>首页</h1>
    <div class="chart-container">
      <div ref="columnChartRef" class="chart left-chart"></div>
      <div ref="pieChartRef" class="chart right-chart"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { columnChart, pieChart } from '@/echart-options/Home';

const columnChartRef = ref(null);
const pieChartRef = ref(null);

onMounted(() => {
  initColumnChart();
  initPieChart();
});

function initColumnChart() {
  const chartDom = columnChartRef.value;
  const myChart = echarts.init(chartDom);
  myChart.setOption(columnChart);
}

function initPieChart() {
  const chartDom = pieChartRef.value;
  const myChart = echarts.init(chartDom);
  myChart.setOption(pieChart);
}
</script>

<style scoped lang="scss">
.chart-container {
  display: flex;
  justify-content: space-between;
}

.chart {
  width: 48%;
  height: 400px;
}

</style>